<link rel="stylesheet" th:href="@{/pages/css/setting.css}" href="../../static/pages/css/setting.css"/>

<div class="layui-card-header">
    <h2 class="header-title">多标签：</h2>
    <div class="pull-right layui-form">
        <input type="checkbox" lay-skin="switch" lay-text="ON|OFF" id="set-tab" lay-filter="set-tab" checked/>
    </div>
</div>

<div class="layui-card-header">
    <h2 class="header-title">主题方案：</h2>
</div>
<div class="layui-card-body theme-div">
    <div class="btnTheme" theme="theme-white" title="黑白主题">
        <img th:src="@{/global/theme/img/black_white.png}" src="../../static/global/theme/img/black_white.png">
    </div>
    <div class="btnTheme" theme="theme-black" title="黑灰主题">
        <img th:src="@{/global/theme/img/dark_grey.png}" src="../../static/global/theme/img/dark_grey.png">
    </div>
    <div class="btnTheme" theme="theme-red" title="黑红主题">
        <img th:src="@{/global/theme/img/black_red.png}" src="../../static/global/theme/img/black_red.png">
    </div>
</div>


<!--<div class="layui-card-header"><h2 class="header-title">设置主题：</h2></div>
<div class="layui-card-body layui-text">
    <a th:href="@{/home/setTheme}" href="/home/setTheme" class="layui-btn" style="background-color: #009688;">默认主题</a>
    <a th:href="@{/home/setTheme?themeName=darkGrey}" href="/home/setTheme?themeName=darkGrey" class="layui-btn layui-btn-normal">深灰色主题</a>
</div>-->

<script>
    layui.use(['form', 'index', 'admin'], function () {
        let $ = layui.jquery;
        let form = layui.form;
        let index = layui.index;
        let admin = layui.admin;

        /*切换多标签*/
        $('#set-tab').prop('checked', index.pageTabs);
        form.render('checkbox');

        form.on('switch(set-tab)', function (data) {
            if (data.elem.checked) {
                location.reload();
            } else {
                index.pageTabs = false;
                index.checkPageTabs();
                admin.refresh();
                admin.closePopupRight();
            }
        });

        /**切换主题*/
        let defaultTheme = "theme-white";
        let tTheme = admin.getLocalData("theme");
        console.info("~~~~~~~~~~~~~~~~~~~" + tTheme);
        $('.btnTheme[theme=' + (tTheme ? tTheme : defaultTheme) + ']').addClass('active');

        $('.btnTheme').click(function () {
            const theme = $(this).attr('theme');

            $('.btnTheme').removeClass('active');
            if (theme) {
                $('.btnTheme[theme=' + theme + ']').addClass('active');
                admin.putLocalData("theme", theme);
            } else {
                $('.btnTheme[theme=' + defaultTheme + ']').addClass('active');
                admin.putLocalData("theme", null);
            }

            admin.changeTheme();
            location.reload();

        });

    })
</script>